<template>
  <div class="approve-detail">
    <el-button type="text" icon="el-icon-arrow-left" @click="handleCancel">审批表单</el-button>
    <div class="process-detail">
      <div class="process-detail-left">
        <div>流程名称：{{ detail.processDefinitionName }}</div>
        <div>发起人：{{ detail.initiator }}</div>
        <div>发起时间：{{ detail.startDate }}</div>
        <div class="apply-material">
          <div class="apply-material-title">申请材料：</div>
          <div v-for="item in fileList" :key="item.id" class="apply-material-name" @click="lookFile(item)">
            {{ item.fileName }}
          </div>
        </div>
      </div>
      <div class="process-detail-right">
        <el-button type="text" @click="goRecord">审批流程</el-button>
      </div>
    </div>
    <el-divider></el-divider>
    <approval-form ref="form" :instanceId="detail.id || detail.processInstanceId"
      :processDefinitionId="detail.processDefinitionId" :readonly="true"></approval-form>
    <el-divider></el-divider>
    <div class="operate">
      <el-button type="primary" size="small" @click="handleUnify('1')" v-if="type == 2 || type == 4">同意</el-button>
      <el-button type="danger" size="small" @click="handleUnify('2')" v-if="type == 4">驳回</el-button>
      <el-button type="danger" size="small" @click="handleRevoke" v-if="type == 2 || type == 3">撤回</el-button>
      <el-button size="small" @click="handleCancel">关闭</el-button>
    </div>
    <!-- 审批流程 -->
    <approve-task v-if="isShowDialog" :showDialog.sync="isShowDialog" :nodeList="nodeList" :type="approveType"
      @approvalConfirm="approvalConfirm"></approve-task>
    <!-- 处理记录 -->
    <process-records :showDialog.sync="showRecordDialog" :detail="detail">
    </process-records>
  </div>
</template>

<script>
import ApprovalForm from "./approvalForm";
import ApproveTask from "./approveTask";
import {
  completeTask,
  callBackTask,
  getFlowNodes,
} from "@/api/internalApproval/allApprovals.js";
import ProcessRecords from "./processRecords";
export default {
  props: {
    type: {
      type: Number,
      default: 1, //  1:详情  2:同意/撤回  3:撤回  4:办理
    },
    detail: {
      type: Object,
      required: true,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      nodeList: [],
      isShowDialog: false,
      approveType: "1", // 审批类型
      showRecordDialog: false,
      fileList: [],
    };
  },
  components: {
    ApprovalForm,
    ApproveTask,
    ProcessRecords,
  },
  methods: {
    // 查看申请材料
    lookFile(item) {
      window.open(item.file); // 重新打开一个浏览器页进行预览
    },
    goRecord() {
      this.showRecordDialog = true;
    },
    // 获取流程节点
    async getFlowNodes() {
      const result = await getFlowNodes({
        taskId: this.detail.taskId,
      });
      this.nodeList = result.data.map((item) => {
        return {
          value: item.nodeId,
          label: item.nodeName,
        };
      });
    },
    /**
     * @description: 审批操作
     * @param {type} 操作类型  1:同意  2:驳回
     * @param {opinion} 审批意见
     * @param {mode} 驳回类型  1:驳回上一节点  2:驳回指定节点
     * @param {specifyNode} 指定节点id
     * @return void
     */
    approvalConfirm(type, opinion, mode, specifyNode) {
      // 手动调用表单提交点击操作
      // document.querySelector(".global-review .el-button").click();
      if (type == 1) {
        this.completeTask(opinion);
      } else {
        this.callBackTask(opinion, specifyNode);
      }
    },
    // 审批驳回某一节点
    async callBackTask(opinion, specifyNode) {
      const result = await callBackTask({
        comment: opinion,
        taskId: this.detail.taskId || this.detail.id,
        targetNodeId: specifyNode,
      });
      this.goBackCommon(result);
    },
    // 审批同意
    async completeTask(opinion) {
      const result = await completeTask({
        comment: opinion,
        taskIds: this.detail.taskId || this.detail.id,
      });
      this.goBackCommon(result);
    },
    // 公共操作提示
    goBackCommon(result) {
      this.$message({
        type: "success",
        message: result.meta.message,
      });
      this.$emit("handleCancelDetail");
    },
    handleRevoke() {
      this.$emit("handleCancelDetail", this.detail);
    },
    handleCancel() {

      this.$emit("handleCancelDetail");
      this.$router.push({
        path: "/approval/internalApproval",
        query: { type: "业务审批", activeName: "first" },

      });
    },
    handleUnify(type) {
      // 判断是否是驳回状态下的同意
      if (type == 1 && this.type == 2) {
        let formData = this.$refs.form.formItemDoList.map((findItem) => {
          return {
            formType: findItem.type,
            modelColumnName: findItem.field,
            formValue: findItem.default,
          };
        });
        this.$emit(
          "submitFormData",
          JSON.stringify(formData),
          this.$refs.form.formDetail
        );
        this.$emit("handleCancelDetail");
        return;
      }
      this.getFlowNodes();
      this.approveType = type;
      this.isShowDialog = true;
    },
  },
  mounted() {
    setTimeout(() => {
      this.fileList = this.$refs.form.fileList;
    }, 1000);
  },
};
</script>

<style lang="scss" scoped>
.approve-detail {
  margin: 10px;
  color: #fff;
  font-size: 14px;
  overflow: auto;

  .process-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;

    &-left {
      display: flex;
      justify-content: space-between;
      flex: 1;
      display: flex;
      flex-wrap: wrap;

      .apply-material {
        margin-top: 10px;
        width: 100%;
      }
    }

    &-right {
      width: 20%;
      display: flex;
      justify-content: flex-end;
    }
  }

  .operate {
    display: flex;
    justify-content: center;
  }

  .apply-material {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    &-title {
      // margin-top:14px;
    }

    &-name {
      margin-right: 10px;
      color: #03cbf6;
      cursor: pointer;
    }
  }
}
</style>